<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<link rel="stylesheet" href="../../libs/layui/css/layui.css">
    <style>
		.test-tree{
            width: 170px;
            height: 190px;
			border: 1px solid #d2d2d2;
    		box-shadow: 0 2px 4px rgba(0,0,0,.12);
			position: absolute;
			top: 40px;
		}
        .eleTree{
            width: 100%;
            height: 150px;
            display: inline-block;
            overflow: auto;
        }
        .eleTree-hide{
            display: none;
        }
        .eleTree-node-content{
            cursor: pointer;
            height: 26px;
            line-height: 1.3;
        }
        .eleTree-node-content:hover,
        .eleTree-node-content.eleTree-node-content-active{
            background-color: #eee;
        }
        .eleTree-node-content-icon .layui-icon{
            padding: 6px 3px;
            color: #c0c4cc;
            font-size: 12px;
            display: inline-block;
            transform: rotate(0deg);
            transition: transform .3s ease-in-out;
        }
        .eleTree-node-content-icon .layui-icon.icon-rotate{
            transform: rotate(90deg);
        }
        .eleTree-node-content .layui-form-checkbox[lay-skin=primary] i{
            width: 13px;
            height: 14px;
            line-height: 1.3;
        }
        .eleTree-node-content-label{
            padding-left: 5px;
        }

        /* checkbox第三种状态 */
        input.eleTree-hideen[type=checkbox]{
            display: none;
        }
        .eleTree-checkbox {
            height: auto!important;
            line-height: normal!important;
            min-height: 12px;
            border: none!important;
            margin-right: 0;
            padding-left: 18px;
            position: relative;
            display: inline-block;
        }
        .eleTree-checkbox i {
            left: 0;
            border: 1px solid #d2d2d2;
            font-size: 12px;
            border-radius: 2px;
            background-color: #fff;
            -webkit-transition: .1s linear;
            transition: .1s linear;
            position: absolute;
            top: 0;
            color: #fff;
            cursor: pointer;
            text-align: center;
            width: 13px;
            height: 14px;
            line-height: 1.3;
        }
        .eleTree-checkbox i:hover {
            border-color: #5FB878;
        }
        .eleTree-checkbox-checked i {
            border-color: #5FB878;
            background-color: #5FB878;
            color: #fff;
        }
        .eleTree-checkbox-line:after{
            content: "";
            position: relative;
            width: 8px;
            height: 1px;
            background-color: #fff;
            display: inline-block;
            top: 7px;
        }

        .eleTree-checkbox.eleTree-checkbox-disabled i{
            cursor: not-allowed;
            background-color: #f2f6fc;
            border-color: #dcdfe6;
            color: #c2c2c2;
        }
        .eleTree-checkbox.eleTree-checkbox-disabled i.eleTree-checkbox-line:after{
            background-color: #c2c2c2;
        }
        .eleTree-checkbox.eleTree-checkbox-disabled i:hover{
            border-color: #dcdfe6;
        }

        #tree-menu{
            margin: 0;
            padding: 2px;
            position: absolute;
            background: #f5f5f5;
            border: 1px solid #979797;
            box-shadow: 2px 2px 2px #999;
            display: none;
        }
        #tree-menu li>a{
            display: block;
            padding: 0 2em;
            text-decoration: none;
            width: auto;
            color: #000;
            white-space: nowrap;
            line-height: 2.4em;
            text-shadow: 1px 1px 0 #fff;
            border-radius: 1px;
        }
        #tree-menu li>a:hover{
            background-color: #e8eff7;
            box-shadow: 0 0 2px #0a6aa1;
        }
        .tree-menu-bg{
            background-color: #ccc;
        }
		.test-btn{position: absolute;bottom: 5px;right: 5px;}
		.test-select{text-overflow: ellipsis;}
		/* .test-select:hover + .test-tree{
			-webkit-animation-duration: .3s;
			animation-duration: .3s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			-webkit-animation-name: layui-upbit;
			animation-name: layui-upbit;
		}
		.test-tree:hover{
			opacity: 1!important;
		} */

    </style>
<body>
<div class="layui-form-item">
	<div class="layui-inline">
		<label class="layui-form-label test_select">站名</label>
		<div class="layui-input-inline" style="width: 160px;">
			<input type="text" placeholder="请选择" readonly value=""  class="layui-input layui-unselect test-select">

			<div class="test-tree" style="opacity: 0">
				<div class="eleTree ele2" lay-filter="data2" style="user-select: auto;">
					<div class="eleTree-node " eletree-floor="0">
						<div class="eleTree-node-content eleTree-node-content-active" style="padding-left: 0px;"><span class="eleTree-node-content-icon"><i class="layui-icon layui-icon-triangle-r icon-rotate"></i></span><input type="checkbox" name="eleTree-node" eletree-status="1" class="eleTree-hideen ">
							<div class="eleTree-checkbox eleTree-checkbox-checked"><i class="layui-icon layui-icon-ok"></i></div><span class="eleTree-node-content-label">a</span></div>
						<div class="eleTree-node-group">
							<div class="eleTree-node " eletree-floor="1" style="display: block;">
								<div class="eleTree-node-content" style="padding-left: 18px;"><span class="eleTree-node-content-icon"><i class="layui-icon layui-icon-triangle-r" style="color: transparent;"></i></span><input type="checkbox" name="eleTree-node" eletree-status="1" class="eleTree-hideen eleTree-disabled">
									<div class="eleTree-checkbox eleTree-checkbox-disabled eleTree-checkbox-checked"><i class="layui-icon layui-icon-ok"></i></div><span class="eleTree-node-content-label">aa1</span></div>
								<div class="eleTree-node-group"></div>
							</div>
							<div class="eleTree-node " eletree-floor="1" style="display: block;">
								<div class="eleTree-node-content" style="padding-left: 18px;"><span class="eleTree-node-content-icon"><i class="layui-icon layui-icon-triangle-r  "></i></span><input type="checkbox" name="eleTree-node" eletree-status="1" class="eleTree-hideen ">
									<div class="eleTree-checkbox eleTree-checkbox-checked"><i class="layui-icon layui-icon-ok"></i></div><span class="eleTree-node-content-label">bb1</span></div>
								<div class="eleTree-node-group">
									<div class="eleTree-node eleTree-hide" eletree-floor="2">
										<div class="eleTree-node-content" style="padding-left: 36px;"><span class="eleTree-node-content-icon"><i class="layui-icon layui-icon-triangle-r" style="color: transparent;"></i></span><input type="checkbox" name="eleTree-node" eletree-status="1" checked="" class="eleTree-hideen ">
											<div class="eleTree-checkbox eleTree-checkbox-checked"><i class="layui-icon layui-icon-ok"></i></div><span class="eleTree-node-content-label">aaaa1</span></div>
										<div class="eleTree-node-group"></div>
									</div>
								</div>
							</div>
							<div class="eleTree-node " eletree-floor="1" style="display: block;">
								<div class="eleTree-node-content" style="padding-left: 18px;"><span class="eleTree-node-content-icon"><i class="layui-icon layui-icon-triangle-r" style="color: transparent;"></i></span><input type="checkbox" name="eleTree-node" eletree-status="1" class="eleTree-hideen ">
									<div class="eleTree-checkbox eleTree-checkbox-checked"><i class="layui-icon layui-icon-ok"></i></div><span class="eleTree-node-content-label">cc1</span></div>
								<div class="eleTree-node-group"></div>
							</div>
						</div>
					</div>
					<div class="eleTree-node " eletree-floor="0">
						<div class="eleTree-node-content" style="padding-left: 0px;"><span class="eleTree-node-content-icon"><i class="layui-icon layui-icon-triangle-r"></i></span><input type="checkbox" name="eleTree-node" eletree-status="1" class="eleTree-hideen ">
							<div class="eleTree-checkbox eleTree-checkbox-checked"><i class="layui-icon layui-icon-ok"></i></div><span class="eleTree-node-content-label">c</span></div>
						<div class="eleTree-node-group">
							<div class="eleTree-node eleTree-hide" eletree-floor="1" style="display: none;">
								<div class="eleTree-node-content" style="padding-left: 18px;"><span class="eleTree-node-content-icon"><i class="layui-icon layui-icon-triangle-r" style="color: transparent;"></i></span><input type="checkbox" name="eleTree-node" eletree-status="1" class="eleTree-hideen eleTree-disabled">
									<div class="eleTree-checkbox eleTree-checkbox-disabled eleTree-checkbox-checked"><i class="layui-icon layui-icon-ok"></i></div><span class="eleTree-node-content-label">aa1</span></div>
								<div class="eleTree-node-group"></div>
							</div>
							<div class="eleTree-node eleTree-hide" eletree-floor="1" style="display: none;">
								<div class="eleTree-node-content" style="padding-left: 18px;"><span class="eleTree-node-content-icon"><i class="layui-icon layui-icon-triangle-r" style="color: transparent;"></i></span><input type="checkbox" name="eleTree-node" eletree-status="1" checked="" class="eleTree-hideen ">
									<div class="eleTree-checkbox eleTree-checkbox-checked"><i class="layui-icon layui-icon-ok"></i></div><span class="eleTree-node-content-label">bb1</span></div>
								<div class="eleTree-node-group"></div>
							</div>
						</div>
					</div>
				</div>
				<button class="layui-btn layui-btn-xs test-btn">确定</button>
			</div>


		</div>
	</div>

	<div class="layui-inline">
		<label class="layui-form-label">时间范围</label>
		<div class="layui-input-inline" style="width: 100px;">
			<input type="text" class="layui-input test1">
		</div>
		<div class="layui-form-mid">-</div>
		<div class="layui-input-inline" style="width: 100px;">
			<input type="text" class="layui-input test2">
		</div>
	</div>

</div>



	<script src="../../libs/layui/layui.js"></script>
    <script>
        layui.config({
            base: "../../js/ENV-INFO/"
        }).use(['jquery','eleTree'], function(){
            var $ = layui.jquery;
            var eleTree = layui.eleTree;

            var data2=[
            {
                    "label": "a",
                    "spread": true,
                    "children": [
                        {
                            "label": "aa1",
                        },
                        {
                            "label": "bb1",
                        },
                        {
                            "label": "cc1"
                        }
                    ]
                },
                {
                    "label": "c",
                    "children": [
                        {
                            "label": "aa1",
                        },
                        {
                            "label": "bb1",
                        }
                    ]
                }
            ];

            eleTree.render({
                elem: '.ele2',
                // url: "../../data/home/tree.json",
                // type: "post",
                data: data2,
                showCheckbox: true,
                contextmenuList: ["add","remove"],
                drag: true,
                accordion: true
            });

            eleTree.on("add(data1)",function(data) {
                console.log(data);
                // 若后台修改，则重新获取后台数据，然后重载
                // eleTree.reload(".ele1", {where: {data: JSON.stringify(data.data)}})
            })
            eleTree.on("edit(data1)",function(data) {
                console.log(data);
            })
            eleTree.on("remove(data1)",function(data) {
                console.log(data);
            })
            eleTree.on("toggleSlide(data1)",function(data) {
                console.log(data);
            })
            eleTree.on("checkbox(data1)",function(data) {
                console.log(data);
            })
            eleTree.on("drag(data2)",function(data) {
                console.log(data);
            })
			$(".test-select").on("click",function() {
                console.log(111);
				if($(".test-tree").hasClass("layui-anim")){
					$(".test-tree").removeClass("layui-anim-upbit");
					$(".test-tree").removeClass("layui-anim");
				}else{
					$(".test-tree").addClass("layui-anim-upbit");
					$(".test-tree").addClass("layui-anim");
				}
			})
            $(".layui-btn").on("click",function() {
                // console.log(eleTree.checkedData(".ele2"));
				var datalist = eleTree.checkedData(".ele2");
				var sel_val="";
				for (var i = 0; i < datalist.length; i++) {
					console.log(datalist[i].label);
					if(!datalist[i].children){
						sel_val += datalist[i].label + ",";
						// console.log(sel_val);
					}
				}
				$(".test-select").val(sel_val);
				$(".test-tree").css("opacity","0");
				$(".test-tree").removeClass("layui-anim-upbit");
				$(".test-tree").removeClass("layui-anim");
            })

        });

		layui.use('laydate', function(){
			var laydate = layui.laydate; 
			var startDate = laydate.render({   
				elem: '.test1'   
				,max:"2099-12-31"   
				,done: function(value, date){     
					endDate.config.min ={         
						year:date.year,          
						month:date.month-1,          
						date: date.date     
					};      
				} 
			}); 
			var endDate = laydate.render({   
				elem: '.test2'   
				,min:"1970-1-1"   
				,done: function (value, date) {       
					startDate.config.max={         
						year:date.year,          
						month:date.month-1,         
						date: date.date     
					}     
				}   
			});
		});
    </script>


</body>
</html>
